<template>
  <div>
      <el-row :gutter="20">
        <el-col class="bg-purple" style="text-align:right;" :span=2>
        msg:
        </el-col>
        <el-col class="bg-purple" :span=10>
        {{ msg }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span=6>
            <el-input-number v-model="num2" :step="1"></el-input-number>
        </el-col>
        <el-col :span=10>
        <el-button type="primary" @click="passParams">向父组件传参</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  props: ['msg'],
  data () {
    return {
      num2: 0
    }
  },
  methods: {
    passParams () {
      this.$emit('changeParam', this.num2)
    }
  }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.bg-purple {
    background: #d3dce6;
}
</style>
